<template>
  <div class="home" ref="homeRef"></div>
</template>

<script setup>
import {onMounted, ref, watch,} from "vue";
import shanxi from "../../assets/shanxi.json"
import nodeImage from "../../assets/img/energy/fwq.png";
import {drawMap} from "../../util/chartUtil.js";

const homeRef = ref()
const mapName = ref("shanxi")
const options = ref({
  // 提示浮窗样式
  tooltip: {
    show: true,
    trigger: "item",
    className: 'tooltip_style',
    formatter: function (params) {
      if (params.componentSubType === 'map') {
        return null
      }
      let data = params.data
      let itemHtml = ""
      if (data.value.length > 2) {
        for (let i = 2; i < data.value.length; i++) {
          itemHtml = itemHtml + `<div class="tooltip_item">
<div class="tooltip_value">` + data.value[i].itemValue + `</div>
<div class="tooltip_remark">` + data.value[i].itemTitle + `</div>
</div>`
        }
      }
      // 循环处理数据，展示数据
      return `<div class="tooltip_box">
<div class="tooltip_title">` + data.name + `</div>
<div class="tooltip_content">` + itemHtml + `</div>
</div>`
    },
  },
  // 地图配置
  geo: [
    {
      map: 'shanxi',
      layoutCenter: ['50%', '50%'], //地图位置
      layoutSize: '100%',
        label: {
          normal: {
            show: true,
            fontFamily: 'SourceHanSansCN',
            color: '#FEFEFE',
          },
          emphasis: {
            show: true,
            fontFamily: 'SourceHanSansCN',
            color: 'black',
          },
        },
        // tooltip:{} tooltip可结合formatter、div、css实现样式
        itemStyle: {
          normal: {
            borderColor: 'rgb(120,166,225)',
            areaColor: {
              type: 'radial',
              x: 400,
              y: 400,
              r: 450,
              colorStops: [{
                offset: 0, color: 'rgb(26,88,173)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgb(71,199,254)' // 100% 处的颜色
              }],
              global: true // 缺省为 false
            }
          },
          emphasis: {
            borderColor: 'rgb(240,240,240)',
            borderWidth: 2,
            areaColor: 'rgb(6, 242, 244)',
          },
        },
      emphasis : {
        disabled : true
      },
      zlevel: 1,
      zoom: 1, //当前视角的缩放比例
      roam: true, //是否开启平游或缩放
      scaleLimit: { //滚轮缩放的极限控制
        min: 0.5,
        max: 4.5
      },
    }],
  series: [
    {
      type: "scatter",
      coordinateSystem: "geo",
      symbol: "pin",
      legendHoverLink: true,
      // 这里渲染标志里的内容以及样式
      label: {
        show: true,
        formatter(value) {
          return "";
        },
        color: "#fff",
      },
      showEffectOn: "render",
      rippleEffect: {
        brushType: "stroke",
      },
      hoverAnimation: true,
      zlevel: 1,
      data: [],
    },
  ],
})
const props = defineProps({
  data: Array
})
let myMapChar;
const setData = () => {
  props.data.forEach(item => {
    let data = {
      name: item.title,
      value: [item.lng, item.lag],
      symbol: "image://" + nodeImage,
      symbolSize: [14, 18]
    }
    item.itemList.forEach(li => {
      data.value.push(li)
    })
    options.value.series[0].data.push(data)
  })
  if(!myMapChar){
    myMapChar = drawMap(homeRef.value, options.value, mapName.value, shanxi)
  }else{
    myMapChar.setOption(options.value);
  }
}

onMounted(() => {
  setData()
})

watch(props, () => {
  setData()
})

</script>
<style scoped lang="scss">
:deep(.tooltip_style) {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .tooltip_box {
    width: 30vh;
    height: 24vh;
    background: url("../../assets/img/public/iconBackground.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    padding: 1.5vh;
  }

  .tooltip_title {
    height: 3vh;
    font-size: 1.8vh;
    font-weight: bold;
  }

  .tooltip_content {
    width: 100%;
    height: 18vh;
    padding: 0.5vh;
  }

  .tooltip_item {
    margin-top: 0.5vh;
    padding-left: 5%;
    width: 50%;
    height: 4vh;
    float: left;
    position: relative;
  }

  .tooltip_item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.75vh;
    width: 0.2vh;
    height: 1.5vh;
    background-color: rgb(0, 153, 255);
  }

  .tooltip_value {
    font-size: 1.6vh;
    font-weight: bold;
    line-height: 2.5vh;
  }

  .tooltip_remark {
    font-size: 1vh;
    color: rgb(200,200,200);
    line-height: 1.5vh;
  }
}
.home {
  margin-left: 10%;
  width: 90%;
  height: 100%;
}
</style>
